<template>
  <div>

    <div class="clearfix">
      <span class="mar-r-10">
        <b style="font-size:20px;color:red;margin-bottom:20px;">如果后台返回给的是扁平化的数据，前端需要怎么处理成右侧的树形结构数据？</b><br>
        parent: [<br>
        &nbsp;&nbsp;&nbsp;&nbsp;{ name: '文件夹1', parent_id: 0, id: 1 },<br>
        &nbsp;&nbsp;&nbsp;&nbsp;{ name: '文件夹2', parent_id: 0, id: 2 },<br>
        &nbsp;&nbsp;&nbsp;&nbsp;{ name: '文件夹3', parent_id: 0, id: 3 },<br>
        &nbsp;&nbsp;&nbsp;&nbsp;{ name: '文件夹1-1', parent_id: 1, id: 4 },<br>
        &nbsp;&nbsp;&nbsp;&nbsp;{ name: '文件夹2-1', parent_id: 2, id: 5 }<br>
        ],<br>
        child: [<br>
        &nbsp;&nbsp;&nbsp;&nbsp;{ name: '文件夹1', parent_id: 1, id: 10001 },<br>
        &nbsp;&nbsp;&nbsp;&nbsp;{ name: '文件夹2', parent_id: 1, id: 10002 },<br>
        &nbsp;&nbsp;&nbsp;&nbsp;{ name: '文件夹2-1', parent_id: 2, id: 10003 },<br>
        &nbsp;&nbsp;&nbsp;&nbsp;{ name: '文件夹2-2', parent_id: 2, id: 10004 },<br>
        &nbsp;&nbsp;&nbsp;&nbsp;{ name: '文件夹1-1-1', parent_id: 3, id: 10005 },<br>
        &nbsp;&nbsp;&nbsp;&nbsp;{ name: '文件夹2-1-1', parent_id: 5, id: 10006 }<br>
        ]<br>
      </span>
      <pre>
       <b style="font-size:20px;color:red;margin-bottom:20px;">答案：</b>
      {{ result }}
  </pre>
    </div>
    <div
      class="clearfix"
      style="margin-bottom:100px;">
      <pre class="mar-r-10">
        <b style="font-size:20px;color:red;margin-bottom:20px;">如果后台返回给的是扁平化的数据，前端需要怎么处理成右侧的树形结构数据？</b><br>
        {{ menu_list }}
        </pre>
      <pre>
        <b style="font-size:20px;color:red;margin-bottom:20px;">答案：</b>
    {{ buildTree(menu_list) }}
</pre>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: {
        parent: [
          { name: '文件夹1', parent_id: 0, id: 1 },
          { name: '文件夹2', parent_id: 0, id: 2 },
          { name: '文件夹3', parent_id: 0, id: 3 },
          { name: '文件夹1-1', parent_id: 1, id: 4 },
          { name: '文件夹2-1', parent_id: 2, id: 5 }
        ],
        child: [
          { name: '文件夹1', parent_id: 1, id: 10001 },
          { name: '文件夹2', parent_id: 1, id: 10002 },
          { name: '文件夹2-1', parent_id: 2, id: 10003 },
          { name: '文件夹2-2', parent_id: 2, id: 10004 },
          { name: '文件夹1-1-1', parent_id: 3, id: 10005 },
          { name: '文件夹2-1-1', parent_id: 5, id: 10006 }
        ]
      },
      result: null,
      menu_list: [{
        id: '1',
        menu_name: '设置',
        menu_url: 'setting',
        parent_id: 0
      }, {
        id: '1-1',
        menu_name: '权限设置',
        menu_url: 'setting.permission',
        parent_id: '1'
      }, {
        id: '1-1-1',
        menu_name: '用户管理列表',
        menu_url: 'setting.permission.user_list',
        parent_id: '1-1'
      }, {
        id: '1-1-2',
        menu_name: '用户管理新增',
        menu_url: 'setting.permission.user_add',
        parent_id: '1-1'
      }, {
        id: '1-1-3',
        menu_name: '角色管理列表',
        menu_url: 'setting.permission.role_list',
        parent_id: '1-1'
      }, {
        id: '1-1-4',
        menu_name: '角色管理新增',
        menu_url: 'setting.permission.role_add',
        parent_id: '1-1'
      }, {
        id: '1-2',
        menu_name: '菜单设置',
        menu_url: 'setting.menu',
        parent_id: '1'
      }, {
        id: '1-2-1',
        menu_name: '菜单列表',
        menu_url: 'setting.menu.menu_list',
        parent_id: '1-2'
      }, {
        id: '1-2-2',
        menu_name: '菜单添加',
        menu_url: 'setting.menu.menu_add',
        parent_id: '1-2'
      }, {
        id: '2',
        menu_name: '订单',
        menu_url: 'order',
        parent_id: 0
      }, {
        id: '2-1',
        menu_name: '报单审核',
        menu_url: 'order.orderreview',
        parent_id: '2'
      }, {
        id: '2-2',
        menu_name: '退款管理',
        menu_url: 'order.refundmanagement',
        parent_id: '2'
      }, {
        id: '2-3',
        menu_name: '实物订单',
        menu_url: 'order.realorder',
        parent_id: '2'
      }, {
        id: '2-1-1',
        menu_name: '全部报单',
        menu_url: 'order.orderreview.all',
        parent_id: '2-1'
      }, {
        id: '2-2-1',
        menu_name: '所有记录',
        menu_url: 'order.refundmanagement.all',
        parent_id: '2-2'
      }, {
        id: '2-2-2',
        menu_name: '待处理',
        menu_url: 'order.refundmanagement.wait',
        parent_id: '2-2'
      }, {
        id: '2-2-3',
        menu_name: '退款原因',
        menu_url: 'order.refundmanagement.result',
        parent_id: '2-2'
      }, {
        id: '2-3-1',
        menu_name: '实物订单管理',
        menu_url: 'order.realorder.list',
        parent_id: '2-3'
      }, {
        id: '3',
        menu_name: '商品',
        menu_url: 'commodity',
        parent_id: 0
      }, {
        id: '3-1',
        menu_name: '分类管理',
        menu_url: 'commodity.classifieldmanagement',
        parent_id: '3'
      }, {
        id: '3-1-1',
        menu_name: '管理',
        menu_url: 'commodity.classifieldmanagement.management',
        parent_id: '3-1'
      }, {
        id: '3-1-2',
        menu_name: '编辑或新增',
        menu_url: 'commodity.classifieldmanagement.edit',
        parent_id: '3-1'
      }, {
        id: '3-2',
        menu_name: '品牌管理',
        menu_url: 'commodity.brandmanagement',
        parent_id: '3'
      }, {
        id: '3-2-1',
        menu_name: '管理',
        menu_url: 'commodity.brandmanagement.management',
        parent_id: '3-2'
      }, {
        id: '3-2-2',
        menu_name: '编辑或新增',
        menu_url: 'commodity.brandmanagement.edit',
        parent_id: '3-2'
      }, {
        id: '3-3',
        menu_name: '商品管理',
        menu_url: 'commodity.commoditymanagement',
        parent_id: '3'
      }, {
        id: '3-3-1',
        menu_name: '管理',
        menu_url: 'commodity.commoditymanagement.management',
        parent_id: '3-3'
      }, {
        id: '3-3-2',
        menu_name: '编辑或新增',
        menu_url: 'commodity.commoditymanagement.edit',
        parent_id: '3-3'
      }, {
        id: '3-4',
        menu_name: '类型管理',
        menu_url: 'commodity.typeManagement',
        parent_id: '3'
      }, {
        id: '3-4-1',
        menu_name: '管理',
        menu_url: 'commodity.typeManagement.management',
        parent_id: '3-4'
      }, {
        id: '3-4-2',
        menu_name: '编辑或新增',
        menu_url: 'commodity.typeManagement.edit',
        parent_id: '3-4'
      }]
    }
  },
  mounted() {
    const AllData = [...this.data.parent, ...this.data.child]
    console.log(AllData)

    const treeMapList = AllData.reduce((memo, current) => {
      memo[current['id']] = current
      return memo
    }, {})

    this.result = AllData.reduce((arr, current) => {
      const parent_id = current.parent_id
      const parent = treeMapList[parent_id]
      if (parent) {
        parent.children ? parent.children.push(current) : parent.children = [current]
      } else if (parent_id === 0) {
        arr.push(current)
      }
      return arr
    }, [])
  },
  methods: {
    /**
    * 将一维的扁平数组转换为多层级对象
    * @param  {[type]} list 一维数组，数组中每一个元素需包含id和parent_id两个属性
    * @return {[type]} tree 多层级树状结构
    */
    buildTree(list) {
      const temp = {}
      const tree = {}
      for (const i in list) {
        temp[list[i].id] = list[i]
      }
      for (const i in temp) {
        if (temp[i].parent_id) {
          if (!temp[temp[i].parent_id].children) {
            temp[temp[i].parent_id].children = {}
          }
          temp[temp[i].parent_id].children[temp[i].id] = temp[i]
        } else {
          tree[temp[i].id] = temp[i]
        }
      }
      return tree
    }
  }
}
</script>

<style scoped>
.clearfix > span,
pre {
  margin-top: 1em;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px 30px;
  font-size: 20px;
  color: #f8f8f8;
  line-height: 30px;
  width: 40%;
  float: left;
}
.clearfix {
  overflow: hidden;
}
.mar-r-10 {
  margin-right: 10%;
}
</style>
